<template>
    <div id="set-password">
        <div class="setList" @click="changPassword()">
            <div class="setList-left">密码</div>
            <div class="setList-right">设置密码<i class="iconfont icon-jiantou"></i></div>
        </div>
        <!--设置密码-->
        <div v-show="show" class="set-wrap">
            <div id="purchased">
                <div class="purchased-top">
                    <i class="iconfont icon-fanhui" @click="close"></i>
                    <span>设置密码</span>
                </div>
            </div>
            <!--是否有旧密码-->
            <div class="password" v-if="user.baseUser.password">
                <div class="passwordNew">
                    <input type="password" placeholder="旧密码" v-model="passwordOld">
                </div>
            </div>
            <div class="password">
                <div class="passwordNew">
                    <input type="password" placeholder="新密码" v-model="passwordNew">
                </div>
                <div class="passwordNew">
                    <input type="password" placeholder="确认新密码" v-model="passwordNew2">
                </div>
            </div>
            <div class="hintpw">请输入6~24位字母、数字组合的密码</div>
            <div class="okSave font1" @click="passwordBtn()">确定</div>

            <!--登录成功提示弹窗-->
            <div class="successExit" v-if="exitShow">
                <div class="successExit-top">请重新登录</div>
                <div class="successExit-p">您修改密码成功，请重新登录验证身份</div>
                <div class="successExit-Btn" @click="successExit()">确定</div>
            </div>
            <div class="zhezhao" v-if="exitShow"></div>
        </div>
    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    import {commonService} from '../../service/commonService'
    export default {
        props: ['user'],
        data () {
            return {
                show:'',
                passwordNew:'',
                passwordNew2:'',
                passwordOld:'',
                exitShow:false,
            }
        },
        created() {
            this.$root.eventHub.$on('confirm',(target) => {
                this.confirm(target)
            });
        },
        methods:{
            changPassword:function(){
                if(!this.user.baseUser.phone){
                    commonService.comfirmModal(this,'请先绑定手机号','confirm')
                }else{
                    this.show = true
                }
            },
            confirm:function(){
                this.$router.push({name:'bind'})
            },
            close:function(){
                this.show = false
            },
            passwordBtn:function(){
                let that = this;
                if(that.passwordNew.length < 6 || that.passwordNew.length > 24){
                    commonService.autoCloseModal(that,'请输入6~24位字母、数字组合的密码',1)
                    return;
                }else if(that.passwordNew != this.passwordNew2){
                    commonService.autoCloseModal(that,'两次输入的密码不一致',1)
                    return;
                }else if(that.passwordNew.length<=24 && that.passwordNew.length>=6) {
                    let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/;
                    if (!regExp.test(that.passwordNew)) {
                        commonService.autoCloseModal(that,'请输入6~24位字母、数字组合的密码',1)
                    }else {
                        let params = {
                            newPassword: that.passwordNew
                        }
                        //有旧密码
                        if (that.user.baseUser.password && that.user.baseUser.password != 'undefined') {
                            params.oldPassword = that.passwordOld
//                        }
                            userService.myPassword(params).then(function (res) {
                                console.log(res)
                                if (res.data.code === 513107) {
                                    that.hint = true;
                                    commonService.autoCloseModal(that, '旧密码错误,请重新输入', 1)
                                } else if (res.data.code === 513103) {
                                    commonService.autoCloseModal(that, '旧密码不能为空', 1)
                                } else if (res.data.code === 513104) {
                                    commonService.autoCloseModal(that, '请输入6~24位字母、数字组合的密码', 1)
                                } else if (res.data.code === 513114) {
                                    commonService.autoCloseModal(that, '旧密码错误,请重新输入', 1)
                                } else {
                                    that.exitShow = true;
                                }
                            })
                        }else{
                            params = {
                                password:that.passwordNew
                            }
                            userService.myPassword2(params).then(function (res) {
                                if(res.success){
                                    that.exitShow = true;
                                }else{
                                    commonService.autoCloseModal(that, res.message, 1)
                                }
                            })
                        }
                    }
                }
            },
            //确认更改密码
            successExit:function(){
                let that = this;
                window.localStorage.removeItem('token');
                userService.myExit().then(function(res){
                    that.$router.push({name:'login'});
                });
            },
        }
    }
</script>

<style lang="less">
#set-password{
    .password{
        width:100%;
        margin:0.27rem 0 0 0;
        padding:0 0.53rem;
        box-sizing: border-box;
        background:#fff;
        overflow: hidden;
        .passwordNew{
            width: 100%;
            height: 1rem;
            box-sizing: border-box;
        }
        input{
            width:100%;
            height: 1rem;
            line-height: 1rem;
            border:none;
            outline:none;
        }
        input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
            color:#BBBBBB;
            font-size:14px;
        }
        input:-moz-placeholder {
            color:#BBBBBB;
            font-size:14px;
        }
        input::-moz-placeholder,textarea::-moz-placeholder{
            color:#BBBBBB;
            font-size:14px;
        }
        input:-ms-input-placeholder,textarea:-ms-input-placeholder{
            color:#BBBBBB;
            font-size:14px;
        }
    }

    .successExit{
        width:80%;
        height:5rem;
        padding:0.3rem;
        box-sizing: border-box;
        position: fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        text-align: center;
        border:1px solid #eee;
        background:#fff;
        border-radius: 3px;
        z-index:1000;
        .successExit-top{
            height:1.2rem;
            line-height:1.2rem;
            font-size:18px;
            font-weight: bold;
        }
        .successExit-p{
            font-size:14px;
        }
        .successExit-Btn{
            width:2rem;
            height:1rem;
            line-height:1rem;
            color:#fff;
            background:#0089E1;
            font-size:14px;
            margin:0.4rem auto;
            border-radius: 3px;
        }
    }
    .zhezhao{
        width:100%;
        height:100%;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background:#333333;
        opacity: 0.85;
    }
}

</style>